<template>
  <div
    v-if="!hideSection"
    class="border-base after:rounded p-2 mt-2"
    @mouseover="showTool = true"
    @mouseout="showTool = false"
  >
    <div class="text-xs font-semibold scale-90 -translate-x-4">{{ data.title }}</div>
    <el-radio-group
      v-model="activeTabIndex"
      size="small"
      v-if="data.view_wrapper.views.length > 1"
      @change="compRenderHandler?.changeViewIndex"
    >
      <el-radio-button
        v-for="(view, index) in data.view_wrapper.views"
        :key="view.name"
        :label="view.name"
        :value="index"
      />
    </el-radio-group>
    <div class="h-[200px] mt-1" :class="{ 'h-[400px]': data.kline }" ref="sectionChart"></div>

    <div
      v-show="showTool"
      class="absolute z-10 right-0 -top-3 bg-background-01 black:bg-background-01-dark rounded border flex gap-4 border-border-02 black:border-border-02-dark px-[6px] py-1 text-sm shadow-selectSection"
    >
      <span
        class="flex gap-1 justify-center items-center cursor-pointer"
        @click="compRenderHandler?.changeChart({ ask_id: askId })"
      >
        <el-icon class="!text-text-01 black:!text-text-01-dark">
          <ChangeChart />
        </el-icon>
        换图
      </span>
      <span
        class="flex gap-1 justify-center items-center cursor-pointer bg-chatcardtool bg-clip-text text-transparent"
        @click="insertToPage"
        v-if="!data.from"
      >
        <el-icon>
          <InsertChart />
        </el-icon>
        插入页面
      </span>
      <span
        class="flex gap-1 justify-center items-center cursor-pointer bg-chatcardtool bg-clip-text text-transparent"
        @click="asyncToPage"
        v-else
      >
        <el-icon>
          <InsertChart />
        </el-icon>
        同步至页面
      </span>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Section } from '@/common/models/recommend-result'
import { computed, onMounted, ref, nextTick, type Ref, watch } from 'vue'
import { useComponentRender, type ComponentRenderReturn } from '../../services/component-render'
import { ChangeChart, InsertChart } from '@/components/icons'
import { getEventBus } from '@/common/services/chat-event-bus'
import { useAppInfoStore } from '@/stores/app'
import { ERRORTYPE } from '@/common/config/const'

const props = defineProps<{
  data: Section
  askId: string
}>()

const activeTabIndex = ref(props.data.view_index < 0 ? 0 : props.data.view_index)

const { sectionInsertEventBus, sectionUpdateEventBus } = getEventBus()

// 模块绘图Dom元素
const sectionChart = ref()

// 展示工具栏
const showTool = ref(false)

// 无数据时进行隐藏
const hideSection = computed(() => {
  return !props.data || !props.data.id
})

// 组件渲染器
const compRenderHandler: Ref<ComponentRenderReturn | null> = ref(null)

const appStore = useAppInfoStore()

const skin = computed(() => appStore.skin)

watch(skin, () => compRenderHandler.value?.renderChart())

onMounted(async () => {
  if (hideSection.value) return
  try {
    compRenderHandler.value = useComponentRender(
      sectionChart.value,
      props.data,
      'tall-small',
      'copilot'
    )
    await nextTick()
    compRenderHandler.value.renderChart()
  } catch (error) {
    window.f10log(ERRORTYPE.JS, `组件渲染失败：${error}`, error)
  }
})

// 交互：插入至页面
function insertToPage() {
  sectionInsertEventBus.emit({ askId: props.askId, section: props.data })
}

// 交互：同步至页面卡片
function asyncToPage() {
  sectionUpdateEventBus.emit({ section: props.data, askId: props.askId })
}
</script>
